<!-- 表单表头 -->
<template>
    <div class="formHead">
        <!-- 标题 -->
        <div class="title">{{ title }}</div>
        <div class="opear-btn">
            <!-- 返回按钮 -->
            <el-button :icon="Back" size="default" v-show="props.elForm_Options.ifreturn !== false"
                @click="opbuttonclick('returnPage')">返 回</el-button>
            <!-- 按钮 -->
            <div class="btn" v-if="props.elForm_Options.opbutton">
                <template v-for="btn in props.elForm_Options.opbutton" :key="btn.dealway">
                    <el-button :icon="btn.icon" :type="btn.type" size="default" @click="opbuttonclick(btn.dealway)"
                        v-show="btn.flagIndexList.includes(props.flagIndex)"
                        :disabled="!(UserMsg.is_superuser || (btn.keyV && permission.includes(btn.keyV) || !btn.disabled))">
                        {{ btn.label }}
                    </el-button>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, toRefs, computed } from 'vue'
import { Session } from '@/utils/storage'
import { Back } from '@element-plus/icons-vue'

let props = defineProps({
    elForm_Options: {
        type: Object,
        default: () => {
            return {}
        }
    },
    flagIndex: {
        type: String,
        default: () => 'detail'
    }
})

let emits = defineEmits(['bottonHandle'])

let state = reactive({
    UserMsg: Session.get('UserMsg'),
    permission: []
})
let { UserMsg, permission } = toRefs(state)

//标题
let title = computed(() => {
    if (props.elForm_Options.pagesinge || props.flagIndex == 'detail') {
        return props.elForm_Options.pagetitle + '详情'
    }
    if (props.flagIndex == 'edit') {
        return '修改' + props.elForm_Options.pagetitle
    }
    if (props.flagIndex == 'create') {
        return '新增' + props.elForm_Options.pagetitle
    }
})

//点击按钮
let opbuttonclick = (dealway) => {
    emits('bottonHandle', dealway)
}

//获取权限

</script>

<style lang="scss" scoped>
.formHead {
    width: 100%;
    padding: 20px 20px 10px;

    .title {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1F2D3D;
    }

    .opear-btn {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 20px;

        .btn {
            ::v-deep(.el-button) {
                margin-left: 12px;
            }
        }
    }
}
</style>
